<template>
  <div>
    <van-nav-bar title="积分兑换商品" left-text="返回" left-arrow @click-left="$router.back()" />

    <div class="system_title">收货地址</div>

    <div class="express-bar"></div>
    <van-cell-group class="addressGroup">

      <van-cell center isLink
      @click="show2 = true"
      icon="location-o"
      :title="address_name + ' ' + address_tel"
      :label="address_details"
      v-if="address_lists.length > 0" />

      <van-cell
        isLink
        icon="location-o"
        @click="show2 = true"
        style="padding-top: 20px;padding-bottom: 20px; margin-top: 10px;"
        title="您还没有收货地址，点击这里创建"
        v-if="address_lists.length === 0"
      />
    </van-cell-group>
    <div class="express-bar"></div>

    <div class="system_title">兑换商品</div>

    <div class="goods_item">

      <div class="left">

      <img :src="goodsItem.image" alt="" />

          </div>

          <div class="left2">

            <div>
              <div class="title">{{goodsItem.title}}</div>
              <div class="price">使用积分：{{goodsItem.pay_points}}</div>

            </div>

            </div>




    </div>


    <div class="form-btn">
      <button class="btn btn-block btn-primary" @click="exchangeSubmit(goodsItem.id)">确认兑换</button>
     </div>


    <van-popup v-model="show2" position="bottom">
      <van-button type="info" block @click="addressAdd()" class="addressAdd">+添加收货地址</van-button>

      <van-radio-group v-model="radio">
        <van-cell-group v-for="item in address_lists" :key="item.id" class="addressGroup">
          <van-cell center="" isLink icon="location-o" :title="item.name + ' ' + item.phone" :label="item.address" @click="setCurrentAddress(item.id)" />
        </van-cell-group>
      </van-radio-group>
    </van-popup>
  </div>
</template>

<script>

  import { Dialog, Card } from 'vant';

export default {

  components: {
    [Card.name]: Card
  },

  data() {
    return {
      goodsItem: {},
      goods_id: 0,
      goods_title: '',
      goods_price: 0,
      goods_image: 0,
      addressPlaceHolder: '请选择地址',
      show2: false,
      address_lists: [],
      address_id: 0,
      address_name: '',
      address_tel: '',
      address_details: '',
      radio: '0',
    };
  },

  mounted() {

  },


  created() {


    //this.goods_id = this.$route.query.goods_id;

    let goods_id = this.$route.query.goods_id

    //console.log(goods_id)

    this.loadGoods(goods_id)

    // this.goodsItem = JSON.parse(this.$route.query.goods_item);

    this.loadAddress();

  },
  methods: {


    exchangeSubmit(goods_id){

      this.apiPost('/shop.order/exchange', {goods_id: goods_id, address_id: this.address_id}).then(res => {

          if(res.data > 0){

              Dialog.alert({
                message: '兑换成功',
              }).then(() => {
                // on close
               this.$router.replace({ name: 'order', params: { active: 0 } })
              });
          }

      });

    },


    loadGoods(goods_id){

      this.apiPost('/shop.goods/read', {goods_id: goods_id}).then(res => {

        this.goodsItem = res.data;
        
      });
    },


    // 选择当前订单的收货地址
    setCurrentAddress(address_id) {

      this.show2 = false;

      this.address_id = address_id;

      for (var index in this.address_lists) {
        if (this.address_lists[index].id === address_id) {

          this.address_name = this.address_lists[index].name;
          this.address_tel = this.address_lists[index].phone;
          this.address_details = this.address_lists[index].address;


        }
      }
    },


    // 当没有收货地址的时候，跳转到添加页面
    addressAdd() {


      let goods_id = this.$route.query.goods_id

      this.$router.push({
        path: '/addressAdd',
        query: {
          redirect_path: '/pointsExchange?goods_id=' + goods_id
        }
      });
    },

    loadAddress() {
      this.apiPost('/shop.address/lists', {}).then(res => {

        this.address_lists = res.data;

        for (var index in this.address_lists) {
          if (this.address_lists[index].default === true) {
            this.address_id = this.address_lists[index].id;
            this.address_name = this.address_lists[index].name;
            this.address_tel = this.address_lists[index].phone;
            this.address_details = this.address_lists[index].address;
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped="scoped">

  @import "@/assets/scss/variable.scss";

.express-bar {
  height: 4px;
  background: url(../assets/images/express.png) left center repeat-x #ffffff;
}


.form-btn{
  padding: 15px;
  }

.goods_item {
  background-color: white;

  display: flex;

  .left{
    width: 120px;
    box-sizing: border-box;
    padding: 15px;
    img{
      width: 100%;
      border: 1px solid #eeeeee;
    }
  }
  .left2{
    flex: 1;
    display: flex;
    align-items: center;
    .price{
      color: $colorPrimary;
      font-size: 0.9em;
    }
  }

}
</style>
